<template>
    
            <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="height:1000px;overflow-y:scroll;">
               <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
                    <li class="mui-table-view-cell" v-for="n in list" :key="n.v_id">

                            <div class="mui-table">
                                <div class="mui-table-cell mui-col-xs-10">
                                    <h4 class="mui-ellipsis">{{n.v_name}}</h4>
                                    <p class="mui-h6 mui-ellipsis">
                                    时间： <span>{{n.v_data | dateFmt('YYYY-MM-DD')}}</span>
                                    点击次数：{{n.v_number}}
                                    作者:{{n.v_pepole}}
                                    </p>

                                     <watchtvinfo :src='n.v_content'></watchtvinfo>
                                    
                                </div>
                            </div>
    
                    </li>
               </mt-loadmore>
                
                </ul>

</template>
<script>
import { Toast } from 'mint-ui';
import watchtvinfo from './WatchTvInfo.vue'
import moment from "moment";
export default {
  filters: {
    dateFmt: function (str, pattern) {
      return moment(str).format("YYYY-MM-DD HH:mm:ss");
    },
  },
    components:{watchtvinfo},
    data(){
        return { 
            list:[],
            current:1,//用来保存当前的页码，默认是第一页
            totalPage:0,
            allLoaded:false,//是否数据加载完毕，如果完毕则是true
            src:"https://video.pearvideo.com/mp4/adshort/20210609/cont-1731681-15691755_adpkg-ad_hd.mp4",
            src1:""
    
        }
    },
    methods:{
        //我们是分页显示视频
        getNews(){
            this.$ajax({
                url:"before/video/"+this.current,
                method:"get"
            }).then(resp=>{
                if(this.current == 1){
                     this.list = resp.data.message;//每次得到的都是一页的数据
                }else{
                     this.list.push(...resp.data.message);
                }
               
                this.totalPage = resp.data.totalPage;
            });
        },
        loadTop(){
            //重新加载第一页的数据就是刷新
            Toast("正在拼命刷新数据。。。。");
            this.current = 1;
            this.getNews();
            this.$refs.loadmore.onTopLoaded();//手动重新刷新
        },
        //上拉加载释放的时候调用的方法
        loadBottom(){
            Toast("正在拼命加载数据。。。。");
            this.current = this.current + 1;
            if(this.current > this.totalPage){
                this.allLoaded = true;
                return Toast("亲，已经到头了。。。。。");
            }
            this.getNews();
        }

    },
    created(){
        //初始化调用
        this.getNews();

    }
} 

</script>
<style scoped>

</style>